<template>
  <div>
    <nav>
      <i class="iconfont iconyonghudianji"></i>
      <ul class="menu">
        <li @click="dialogVisible = true">修改密码</li>
        <li @click="jumpBack">退出</li>
      </ul>
    </nav>

    <!-- <div> -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" z-index="1">
      <!-- <div style="width: 70%;margin: 0 auto"> -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="密码" prop="oldp">
          <el-input v-model="ruleForm.oldp" type="password" placeholder="请输入旧密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newp">
          <el-input v-model="ruleForm.newp" type="password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="rep">
          <el-input v-model="ruleForm.rep" type="password" placeholder="请确认密码"></el-input>
        </el-form-item>
      </el-form>
      <!-- </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible = false; ruleForm.rep='';ruleForm.newp='';ruleForm.oldp=''"
        >取 消</el-button>
        <el-button type="primary" @click="updatePass">确 定</el-button>
      </span>
    </el-dialog>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  name: "headerMenu",
  components: {},
  data() {
    var checkNew = (rule, value, callback) => {
      if (value !== this.ruleForm.newp) {
        callback(new Error("两次输入密码不一样"));
      } else {
        callback();
      }
    };

    var checkpass = (rule, value, callback) => {
      var patrn = /^(\w*(?=\w*\d)(?=\w*[A-Za-z])\w*){6,20}$/;
      if (!patrn.exec(value)) {
        callback(new Error("密码必须是字母、数字和下划线的组合"));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      ruleForm: {
        oldp: "",
        newp: "",
        rep: ""
      },
      rules: {
        oldp: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
        ],
        newp: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur"
          },
          { validator: checkpass, trigger: "blur" }
        ],
        rep: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "长度在 6 到 20 个字符",
            trigger: "blur"
          },
          { validator: checkNew, trigger: "blur" },
          { validator: checkpass, trigger: "blur" }
        ]
      }
    };
  },
  mounted() {},
  methods: {
    //退出登录
    jumpBack: function() {
      var self = this;
      this.$http.post("/api/login/logout").then(res => {
        if (res.data.code == 0) {
          var type = self.common.getCookie("type");
          // delCookie('account')
          // delCookie('type')
          if (type != 3) self.$router.push("/login");
          else self.$router.push("/collegeLogin");
        } else {
          this.message(true, res.data.msg, "error");
        }
      });
    },
    updatePass: function() {
      var self = this;
      console.log(this.ruleForm);
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$axios(
            "post",
            "/api/login/editPassword",
            {
              oldPass: self.ruleForm.oldp,
              newPass: self.ruleForm.newp,
              rePass: self.ruleForm.rep
            },
            function() {
              self.dialogVisible = false;
              self.ruleForm.rep = "";
              self.ruleForm.newp = "";
              self.ruleForm.oldp = "";
            }
          );
          // .then(res => {
          //   if (res.data.code == 0) {
          //     self.message(true, "修改成功", "success");
          //     self.dialogVisible = false;
          //     self.ruleForm.rep = "";
          //     self.ruleForm.newp = "";
          //     self.ruleForm.oldp = "";
          //   } else {
          //     self.message(true, res.data.msg, "error");
          //   }
          // });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      // axios.post('/upass', {
      //     oldp: this.ruleForm.oldp,
      //     newp: this.ruleForm.newp,
      //     rep: this.ruleForm.rep
      // }).then(res => {
      //     if (res.data.code == 0) {
      //         this.message(true, '修改成功', 'success');
      //     } else {
      //         this.message(true, res.data.msg, 'error');
      //     }
      // })
    }
  }
};
</script>

<style lang="scss" scoped>
.iconfont {
  font-size: 30px;
  color: #fff;
  line-height: 60px;
  width: 30px;
  height: 33px;
  display: block;
  margin: 0 25px 0 auto;
  &:hover + .menu {
    display: block;
  }
}
.menu {
  width: 80px;
  padding-top: 20px;
  margin-left: auto;
  text-align: center;
  display: none;
  position: relative;
  &:hover {
    display: block;
    z-index: 999;
  }
}
.menu > li {
  line-height: 30px;
  height: 30px;
  color: #333;
  padding: 5px 0;
  background-color: #fff;
  font-size: 14px;
}
</style>